window.onload = function () {
    const wrapDom = document.querySelector("#wrap"); //获取wrap
    const imgDom = wrapDom.children;//获取wrapimg
    //var wrap = document.getElementById('wrap');
    const imgDeg = 360 / imgDom.length; //平分360度
    for (var i = 0; i < imgDom.length; i++) {  //分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置)
        imgDom[i].style.transform = "rotateY(" + i * imgDeg + "deg) translateZ(350px)";
        imgDom[i].style.transition = "transform 1s " + (imgDom.length - 1 - i) * 0.2 + "s";
    }
    var lastx, lasty, nowx, nowy, changeX, changeY, roX = -10, roY = 0; //初始化新旧鼠标坐标 每次改变坐标大小 和rotateX和rotateY初始值

    document.onmousedown = function (e) {
        clearInterval(timer)
        var timer = null;
        var ev = e || window.event;//兼容事件
        lastx = ev.clientX;  //当前鼠标位置
        lasty = ev.clientY;
        this.onmousemove = function (e) {

            clearInterval(timer)
            var ev = e || window.event;
            nowx = ev.clientX; //现在鼠标位置
            nowy = ev.clientY;
            changeX = nowx - lastx;   //x轴变化了多少
            changeY = nowy - lasty;  //y轴变化了多少
            roY += changeX * 0.1;        //调节转的速度
            roX -= changeY * 0.1;        //调节转的速度

            wrapDom.style.transform = "rotateX(" + roX + "deg) rotateY(" + roY + "deg)"; //赋值新的rotateX和rotateY
            lastx = nowx;  //将旧的数据更新
            lasty = nowy;  //将旧的数据更新

        }
        this.onmouseup = function () {
            this.onmousemove = null;    //取消移动事件
            timer = setInterval(function () {   //设定时器逐渐减小rotateX和rotateY
                changeX *= 0.95;  //每30毫秒rotateX减少5%
                changeY *= 0.95;   //每30毫秒rotateY减少5%
                roY += changeX * 0.2; //调节转的速度
                roX -= changeY * 0.2; //调节转的速度
                wrapDom.style.transform = "rotateX(" + roX + "deg) rotateY(" + roY + "deg)";//赋值新的rotateX和rotateY

            }, 30)
        }
        return false; //取消默认事件
    }
} 